<!doctype html>
<html>
<head>
<title>计算属性和侦听属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<p>Original message:"{{message}}"</p>
		<p>Computed reversed message:"{{reversedmessage}}"</p>
		<br/>
		<div>{{fullname}}
		</div>
		</div>
	
	<script>
		var vm= new Vue({
			el:'#app',
			data:{
				message:'Hello Vue',
				firstname:'Foo',
				lastname:'baz',
				fullname:'Foo Baz'
			},
			computed:{
				reversedmessage:function(){
					return this.message.split('').reverse().join('')
				}
			},
			watch:{
				firstname:function(val){
					this.fullname=val+this.lastname
				},
				lastname:function(val){
					this.fullname=this.firstname+val
				}
				
			}
		
		})
	
	</script>
</body>
</html>